﻿@using System.ComponentModel.DataAnnotations;
@using System.Text.Json;
@using System.ComponentModel

    <Form Model="@model"
          LabelColSpan="8"
          WrapperColSpan="16">
        <FormItem Label="Fail" ValidateStatus=FormValidateStatus.Error Help="Should be combination of numbers &amp; alphabets">
            <Input @bind-Value="@context.Username" Placeholder="unavailable choice" />
        </FormItem>
        <FormItem Label="Warning" ValidateStatus=FormValidateStatus.Warning>
            <Input @bind-Value="@context.Username" Placeholder="Warning">
                <Prefix>
                    <Icon Type="smile" Theme="outline"/>
                </Prefix>
            </Input>
        </FormItem>
        <FormItem Label="Validating" HasFeedback ValidateStatus=FormValidateStatus.Validating Help="The information is being validated...">
            <Input @bind-Value="@context.Username" Placeholder="I'm the content being validated" />
        </FormItem>
        <FormItem Label="Success" HasFeedback ValidateStatus=FormValidateStatus.Success>
            <Input @bind-Value="@context.Username" Placeholder="I'm the content" />
        </FormItem>
        <FormItem Label="Warning" HasFeedback ValidateStatus=FormValidateStatus.Warning>
            <Input @bind-Value="@context.Username" Placeholder="Warning" />
        </FormItem>
        <FormItem Label="Fail" HasFeedback ValidateStatus=FormValidateStatus.Error Help="Should be combination of numbers &amp; alphabets">
            <Input @bind-Value="@context.Username" Placeholder="unavailable choice" />
        </FormItem>
        <FormItem Label="Success" HasFeedback ValidateStatus=FormValidateStatus.Success>
            <DatePicker @bind-Value="@context.DatePicker" Picker="@DatePickerType.Date" Style="width: 100%;" />
        </FormItem>
        <FormItem Label="Warning" HasFeedback ValidateStatus=FormValidateStatus.Warning>
            <TimePicker @bind-Value="@context.TimePicker" Style="width: 100%;" />
        </FormItem>
        <FormItem Label="Error" HasFeedback ValidateStatus=FormValidateStatus.Error>
            <Select DataSource="@_options" 
                    @bind-Value="@context.SelectedOption"
                    AllowClear>
            </Select>
        </FormItem>
        <FormItem Label="Validating" HasFeedback ValidateStatus=FormValidateStatus.Validating Help="The information is being validated...">
            <Select DataSource="@_options2" 
                    @bind-Value="@context.SelectedOption2"
                    AllowClear
                    Placeholder="Please select">
            </Select>
        </FormItem>
        <FormItem Label="inline" Style="margin-bottom: 0;">
            <ChildContent>
                <div style="display:grid;grid-template-columns:45% 1fr 45%;">
                    <FormItem ValidateStatus=FormValidateStatus.Error Help="Please select the correct date">
                        <DatePicker @bind-Value="@context.DatePicker2" Style="width:100%;"/>
                    </FormItem>
                    <span style="text-align:center;">-</span>
                    <FormItem>
                        <DatePicker @bind-Value="@context.DatePicker3" Style="width:100%;" />
                    </FormItem>
                </div>
            </ChildContent>
        </FormItem>
        <FormItem Label="Success" HasFeedback ValidateStatus=FormValidateStatus.Success>
            <AntDesign.InputNumber @bind-Value="@context.InputNumber" Style="width:100%;"></AntDesign.InputNumber>
        </FormItem>
        <FormItem Label="Success" HasFeedback ValidateStatus=FormValidateStatus.Success>
            <AntDesign.Input @bind-Value="@context.Input" AllowClear Placeholder="with allowClear"></AntDesign.Input>
        </FormItem>
        <FormItem Label="Warning" HasFeedback ValidateStatus=FormValidateStatus.Warning>
            <AntDesign.InputPassword @bind-Value="@context.Password" Placeholder="with input password"></AntDesign.InputPassword>
        </FormItem>
        <FormItem Label="Error" HasFeedback ValidateStatus=FormValidateStatus.Error>
            <AntDesign.InputPassword @bind-Value="@context.Password" AllowClear Placeholder="with input password and allowClear"></AntDesign.InputPassword>
        </FormItem>
    </Form>
@code
{
    public class Model
    {
        public string Username { get; set; }
        public DateTime? DatePicker { get; set; }
        public DateTime? TimePicker { get; set; }
        public string SelectedOption { get; set; }
        public string SelectedOption2 { get; set; }
        public DateTime? DatePicker2 { get; set; }
        public DateTime? DatePicker3 { get; set; }
        public int? InputNumber { get; set; }
        public string Input { get; set; }
        public string Password { get; set; }
    }

    private Model model = new Model();

    private List<string> _options;
    private List<string> _options2;

    protected override void OnInitialized()
    {
        _options = new List<string> 
        {
            "Option 1", "Option 2", "Option 3"
        };
        _options2 = new List<string> 
        {
            "Option 1", "Option 2", "Option 3"
        };
    }
}
